<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>智能图书平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='facelogin.css') }}">

</head>

<body>
    <div class="form-wrapper">
        <div class="header">
            人脸信息录入
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="username" placeholder="用户名" class="border-item" autocomplete="off"
                    id="username">
            </div>
        </div>
        <div class="action">
            <button class="btn" onclick="openMedia()">打开摄像头</button>
            <button class="btn" id="register">信息录入</button>
        </div>
        <div class="icon-wrapper"></div>
        <div class="text">欢迎使用人脸注册</div>
    </div>
    <div class="facelogin">
        <div class="input-face">
            <video style="display: none; border-radius:50%; position: relative; left: 15px; top: 15px" class="src-video"
                width="520px" height="520px" autoplay="autoplay"></video>
            <!--设置一个画布，动态的将图片信息展示在画布上-->
            <canvas id="canvas" width="520px" height="520px" style="display: none"></canvas>
            <img src="" class="photo" style="display: none" id="pic">
        </div>
    </div>

    <!--<div class="col-md-12">-->
    <!--    <div class="col-md-3"></div>-->
    <!--    <div class="col-md-6" align="center" style="padding-top: 60px" >-->
    <!--        <h1>人脸注册</h1>-->
    <!--        用户名:<input type="text" name="username" id="username"><br>-->
    <!--        <br>-->
    <!--        <button onclick="openMedia()">人脸注册</button>-->
    <!--        <button id="register">确定注册</button>-->
    <!--        <br>-->
    <!--        <video style="display: none;" class="src-video" width="300px" height="300px" autoplay="autoplay"></video>-->
    <!--        &lt;!&ndash;设置一个画布，动态的将图片信息展示在画布上&ndash;&gt;-->
    <!--        <canvas id="canvas" width="300px" height="300px" style="display: none"></canvas>-->
    <!--        <img src="" class="photo" style="display: none" id="pic">-->
    <!--    </div>-->
    <!--    <div class="col-md-3"></div>-->
    <!--</div>-->
</body>
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.9.1.min.js') }}"></script>
<script>
    var srcVideo = document.querySelector("video.src-video");
    var isOpened = false; // 判断摄像头是否已经打开

    var openMedia = function () {
        srcVideo.style.display = "block";
        if (navigator.mediaDevices === undefined) {
            alert("Your browser cannot using camera!");
            return;
        }
        var constrains = {
            audio: false,
            video: { width: 300, height: 300 }
        }
        //navigator.mediaDevices.getUserMedia(constrains) JavaScript 自带的访问用户摄像头等媒体设备的接口
        var mediaPromise = navigator.mediaDevices.getUserMedia(constrains)
        mediaPromise.then(function (stream) {
            srcVideo.srcObject = stream;
            srcVideo.play();
            isOpened = true;
        }).catch(function (err) {
            alert(arr)

        })
    }

    //点击确定注册
    var btn = document.getElementById("register");
    //设置图片展示标签
    var photo = document.querySelector("img.photo");

    async function performRegistration(username, userImgSrc) {
    //发送异步请求
      const response = await $.ajax({
        url: "face_register",
        type: "post",
        data: {
          "userName": username,
          "userImgSrc": userImgSrc
        },
        async: true,
      });

      if (response.result === "1") {
        alert("人脸录入成功！即将返回登录页面");
        location.href = "/face_login";
      } else if (response.result === "0") {
        alert("录入信息失败请重新注册!");
      } else if (response.result === "2") {
        alert("录入信息失败用户信息已存在!");
      } else if (response.result === "3") {
        alert("未注册该用户，即将跳转登录注册页面")
        location.href = "/login";
      } else {
        alert("系统错误！");
      }
    }

    btn.onclick = function () {
      var username = $("#username").val();

      if (username !== "") {
        //判断摄像头是否打开
        if (!isOpened){
            alert("请打开摄像头进行注册！");
            return;
        }
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(srcVideo, 0, 0, 300, 300);
        photo.src = canvas.toDataURL();
        var userImgSrc = photo.src;

        performRegistration(username, userImgSrc);
      } else {
        alert("请输入用户名再注册！");
      }
    }
    //定时器
    // setInterval(btn.onclick,3000);
</script>

</html>